<nz-modal [(nzVisible)]="isVisible"
          [nzWidth]="880" nzTitle="添加下级合作伙伴机构"
          (nzOnCancel)="handleCancel()"
          (nzOnOk)="handleOk()"
          [nzOkLoading]="isOkLoading"
          [nzFooter]="null"
>
  <nz-spin [nzSpinning]="isSpinning">
    <form nz-form [formGroup]="formModel">

      <nz-form-item>
        <nz-form-label [nzSpan]="5" nzRequired>合作伙伴类型</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择合作伙伴类型！">
          <nz-radio-group id="type" formControlName="type" [(ngModel)]="type" (ngModelChange)="changeTypePic()">
            <label nz-radio [nzValue]="3">有限公司</label>
            <label nz-radio [nzValue]="2">个体户</label>
            <label nz-radio [nzValue]="1">自然人</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item [hidden]="type==1">
        <nz-form-label [nzSpan]="5" nzRequired>营业执照号码</nz-form-label>
        <nz-form-control [nzSpan]="15" nzHasFeedback [nzErrorTip]="bussAuthNumErrorTpl" nzValidatingTip="验证中...">
          <input nz-input type="text" formControlName="bussAuthNum" placeholder="公司、个体请输入营业执照号码">
          <ng-template #bussAuthNumErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入营业执照证件号码!
            </ng-container>
            <ng-container *ngIf="control.hasError('principalCertNo')">
              请输入正确的营业执照证件号码!
            </ng-container>
            <ng-container *ngIf="control.hasError('duplicated')">
              该营业执照证件号码已存在!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label [nzSpan]="5" nzRequired nzFor="agencyName">合作伙伴全称</nz-form-label>
        <nz-form-control [nzSpan]="15" nzErrorTip="请输入全称！">
          <input nz-input type="text" id="agencyName" formControlName="agencyName" placeholder="公司、个体请输入营业执照名称，个人输入姓名">
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="5" nzRequired nzFor="alias">合作伙伴简称</nz-form-label>
        <nz-form-control [nzSpan]="15" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="aliasErrorTpl">
          <input nz-input type="text" formControlName="alias" placeholder="公司、个体请输入营业执照名称，个人输入姓名">
          <ng-template #aliasErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入简称!
            </ng-container>
            <ng-container *ngIf="control.hasError('duplicated')">
              该简称已存在!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <!--      <div formGroupName="user">-->
      <nz-form-item>
        <nz-form-label [nzSpan]="5" nzRequired nzFor="username">登录账号</nz-form-label>
        <nz-form-control [nzSm]="15" nzHasFeedback nzValidatingTip="验证中..." [nzXs]="24" [nzErrorTip]="mobileErrorTpl">
          <input *ngIf="mobileVerify==1" nz-input type="text" formControlName="username" readonly
                 placeholder="请输入登录账号(例如：英文、汉字或邮箱)"/>
          <input *ngIf="mobileVerify==0" nz-input type="text" formControlName="username"
                 placeholder="请输入登录账号(例如：英文、汉字或邮箱)">
          <ng-template #mobileErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入用户登录账号!
            </ng-container>
            <ng-container *ngIf="control.hasError('duplicated')">
              该登录账号已存在!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="agencyId<=0">
        <nz-form-label [nzSpan]="5" nzRequired>账号密码</nz-form-label>
        <nz-form-control [nzSpan]="15" nzErrorTip="请输入用户密码！" [nzErrorTip]="passwordErrorTpl">
          <input nz-input type="password" formControlName="password" placeholder="请输入账号密码" readonly
                 onfocus="this.removeAttribute('readonly')"/>
          <ng-template #passwordErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入用户登录密码!
            </ng-container>
            <ng-container *ngIf="control.hasError('duplicated')">
              密码最小长度为6!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label [nzSpan]="5" nzRequired nzFor="mobile">手机号码</nz-form-label>
        <nz-form-control [nzSm]="15" nzHasFeedback nzValidatingTip="验证中..." [nzXs]="24" [nzErrorTip]="mobileErrorTp">
          <input *ngIf="mobileVerify==1" nz-input type="number" formControlName="mobile" readonly
                 placeholder="请输入手机号码"/>
          <input *ngIf="mobileVerify==0" nz-input type="text" formControlName="mobile" placeholder="请输入手机号码">
          <ng-template #mobileErrorTp let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入用户手机号!
            </ng-container>
            <ng-container *ngIf="control.hasError('mobile1')">
              请输入正确的手机号码!
            </ng-container>
            <ng-container *ngIf="control.hasError('duplicated')">
              该手机号码已存在!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5" nzRequired>负责人姓名</nz-form-label>
        <nz-form-control [nzSpan]="15" nzErrorTip="请输入负责人姓名！">
          <input nz-input type="text" formControlName="name" placeholder="请输入负责人姓名">
        </nz-form-control>
      </nz-form-item>
      <!--      </div>-->

      <nz-form-item [hidden]="type!=1">
        <nz-form-label [nzSpan]="5" nzRequired>身份证号码</nz-form-label>
        <nz-form-control [nzSpan]="15" nzHasFeedback nzErrorTip="请输入身份证件号码!" [nzErrorTip]="principalCertNoErrorTpl"
                         nzValidatingTip="验证中...">
          <input nz-input type="text" formControlName="idCardNo" placeholder="请输入身份证号码">
          <ng-template #principalCertNoErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请输入身份证号码!
            </ng-container>
            <ng-container *ngIf="control.hasError('principalCertNoPerson')">
              请输入正确的身份证号码!
            </ng-container>
            <ng-container *ngIf="control.hasError('duplicated')">
              身份证号码已存在!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item>
        <nz-form-label class="blank" [nzSpan]="5">请选择地区</nz-form-label>
        <nz-form-control class="margin-bottom" [nzSpan]="5">
          <div style="padding-right: 10px;">
            <nz-select formControlName="province" nzShowSearch nzAllowClear nzPlaceHolder="请选择省区"
                       (ngModelChange)="provinceChange($event)">
              <nz-option *ngFor="let pr of provinceList" nzLabel="{{pr.name}}" nzValue="{{pr.code}}"></nz-option>
            </nz-select>
          </div>
        </nz-form-control>

        <nz-form-control class="margin-bottom" [nzSpan]="5">
          <div style="padding-right: 10px;">
            <nz-select nzShowSearch nzAllowClear formControlName="city" nzPlaceHolder="请选择市区"
                       (ngModelChange)="cityChange($event)">
              <nz-option *ngFor="let ci of cityList" nzLabel="{{ci.name}}" nzValue="{{ci.code}}"></nz-option>
            </nz-select>
          </div>
        </nz-form-control>

        <nz-form-control class="margin-bottom" [nzSpan]="5">
          <div>
            <nz-select nzShowSearch nzAllowClear formControlName="district" nzPlaceHolder="请选择县区"
                       [(ngModel)]="districtCode">
              <nz-option *ngFor="let di of districtList" nzLabel="{{di.name}}" nzValue="{{di.code}}"></nz-option>
            </nz-select>
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">详细地址</nz-form-label>
        <nz-form-control [nzSpan]="15" nzErrorTip="请输入详细地址！">
          <input nz-input type="text" formControlName="address" placeholder="请输入详细地址">
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="!agencyInfoDetailVisible">
        <nz-form-label [nzSpan]="5" nzRequired>扫码支付费率（%）</nz-form-label>
        <nz-form-control [nzSpan]="15" nzErrorTip="请填写费率！">
          <nz-input-number formControlName="fee" [nzMin]="0" [nzMax]="0.6" [nzStep]="0.1"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="!agencyInfoDetailVisible">
        <nz-form-label [nzSpan]="5" nzRequired>抖音核销费率（%）</nz-form-label>
        <nz-form-control [nzSpan]="15" nzErrorTip="请填写费率！">
          <nz-input-number formControlName="tiktokRate" [nzMin]="0" [nzMax]="0.6" [nzStep]="0.1"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="!agencyInfoDetailVisible">
        <nz-form-label [nzSpan]="5" nzRequired>美团核销费率（%）</nz-form-label>
        <nz-form-control [nzSpan]="15" nzErrorTip="请填写费率！">
          <nz-input-number formControlName="meiTuanRate" [nzMin]="0" [nzMax]="0.6" [nzStep]="0.1"></nz-input-number>
        </nz-form-control>
    </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">资质上传</nz-form-label>
        <nz-form-control [nzSpan]="15">
          <div class="img_contain">
            <div>
              <nz-upload
                class="avatar-uploader"
                [nzTransformFile]="transformFile"
                [nzAction]="uploadUrl"
                [nzHeaders]="{ authorization: accessToken }"
                [nzData]="{type:1}"
                nzName="image"
                nzListType="picture-card"
                [nzShowUploadList]="false"
                (nzChange)="handleChange($event, 'certPhotoA')"
              >
                <ng-container *ngIf="!certPhotoA">
                  <i class="upload-icon" nz-icon [nzType]="certPhotoA ? 'loading' : 'plus'"></i>
                </ng-container>


                <div *ngIf="certPhotoA">
                  <nz-badge [nzCount]="iconTemplate" (click)="closeImage('certPhotoA')">
                  <img (click)="img($event)"  nz-image [nzSrc]="serverFileUrl+certPhotoA+'.jpg'"
                         width="104px"
                         height="104px"/>
                  </nz-badge>
                </div>
              </nz-upload>
              <div STYLE="text-align: center; width:100px">身份证正面</div>
            </div>

            <div>
              <nz-upload
                class="avatar-uploader"
                [nzAction]="uploadUrl"
                [nzHeaders]="{ authorization: accessToken }"
                [nzData]="{type:2}"
                nzName="image"
                nzListType="picture-card"
                [nzShowUploadList]="false"
                [nzTransformFile]="transformFile"
                (nzChange)="handleChange($event,'certPhotoB')"
              >
                <ng-container *ngIf="!certPhotoB" >
                  <i class="upload-icon" nz-icon [nzType]="certPhotoB ? 'loading' : 'plus'"></i>
                </ng-container>
              <div *ngIf="certPhotoB">
                <nz-badge [nzCount]="iconTemplate" (click)="closeImage('certPhotoB')">
                <img  (click)="img($event)"  nz-image [nzSrc]="serverFileUrl+certPhotoB+'.jpg'"
                     width="104px"
                     height="104px"/>
                </nz-badge>
              </div>
              </nz-upload>
              <div STYLE="text-align: center; width:100px">身份证反面</div>
            </div>


            <div [hidden]="type==1">
              <nz-upload
                class="avatar-uploader"
                [nzAction]="uploadUrl"
                [nzHeaders]="{ authorization: accessToken }"
                [nzData]="{type:3}"
                nzName="image"
                nzListType="picture-card"
                [nzShowUploadList]="false"
                [nzTransformFile]="transformFile"
                (nzChange)="handleChange($event,'licensePhoto')"
              >
                <ng-container *ngIf="!licensePhoto">
                  <i class="upload-icon" nz-icon [nzType]="licensePhoto ? 'loading' : 'plus'"></i>
                </ng-container>

              <div *ngIf="licensePhoto">
                <nz-badge [nzCount]="iconTemplate" (click)="closeImage('licensePhoto')">
                <img (click)="img($event)"  nz-image [nzSrc]="serverFileUrl+licensePhoto+'.jpg'"
                     width="104px"
                     height="104px"/>
                </nz-badge>
              </div>
              </nz-upload>
              <div STYLE="text-align: center; width:100px">营业执照图片</div>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item>
    </form>


      <ng-template #iconTemplate>
        <i nz-icon nzType="close-circle" nzTheme="twotone" class="ant-scroll-number-custom-component icon-del" [nzTwotoneColor]="'red'"></i>
      </ng-template>


    <div class="steps-action" *ngIf="userInfo.agencyId != agencyId">
      <button nz-button nzType="primary" (click)="handleOk()">
        <span>确&nbsp;&nbsp;&nbsp;&nbsp;认</span>
      </button>
    </div>
  </nz-spin>
</nz-modal>
